<template>
  <div :class="real_them">
    <div class="comment_head">
      <div style="overflow: hidden" class="icon">
        <img style="height: 100%" :src="data.icon" alt="" />
      </div>
      <div class="username">{{ username }}</div>
    </div>
    <div class="comment_body">
      {{ context }}
    </div>
    <div class="comment_foot">
      <div class="date">{{ real_time }}</div>
      <div class="sm_icons">
        <div @click="addLike" :class="likeclass">
          <i class="el-icon-thumb"></i>
          <span>{{ like }}</span>
        </div>
        <div @click="ifReply = !ifReply" :class="commentclass">
          <i class="el-icon-chat-dot-square"></i>
          <span>{{ ifReply ? "取消回复" : comment }}</span>
        </div>
      </div>
    </div>
    <div v-if="ifReply" class="reply">
      <el-input
        type="textarea"
        class="inner"
        placeholder="请输入内容"
        v-model="replyContext"
        maxlength="100"
        show-word-limit
      >
      </el-input>
      <div @click="reaplyComment" class="btn">回复</div>
    </div>
  </div>
</template>

<script>
import { time } from "../utils/time";
import { json } from "../utils/fromjson";
import PostComment from "../api/PostComment";
export default {
  name: "comment_first",
  data() {
    return {
      allReadyLike: 0,
      ifReply: 0,
      replyContext: "",
      them: "comment_first",
      updateLike:0
    };
  },
  props: {
    data: {
      require: true,
      default: "",
    },
  },
  mounted() {
    // 这里进行点赞高亮辨别 现在默认用户为2
    setTimeout(() => {
      let check;
      if (this.data.likeusers) {
        check = JSON.parse(JSON.parse(this.data.likeusers)).indexOf(
          this.$store.state.infomation.id
        );
        this.allReadyLike = check == -1 ? 0 : 1;
      }
    }, 1000);
  },
  methods: {
    addLike() {
      if (!this.$store.state.islogin) {
        this.$message({
          message: "请先登录",
          type: "warning",
        });
        return;
      }
      if (this.allReadyLike) {
        this.data.likes--;
        this.allReadyLike--;
      } else {
        this.data.likes++;
        this.allReadyLike++;
      }
      this.updateLike ++
      console.log(
        this.data.likes
      );
      let target = {
        id: this.data.id,
        userid: this.$store.state.infomation.id,
        like: this.data.likes,
      };
      this.$store.commit("setLikes", target);
    },
    reaplyComment() {
      if (!this.replyContext) {
        return;
      }
      if (!this.$store.state.islogin) {
        this.$message({
          message: "请先登录",
          type: "warning",
        });
        return;
      }
      const params = new URLSearchParams();
      // 目前userid写死 还进行登录 用于测试
      params.append("replyCommentId", this.data.id);
      params.append("userid", this.$store.state.infomation.id);
      params.append("replyuserid", this.data.userid);
      params.append("level", 2);
      params.append("context", this.replyContext);
      params.append("time", time(new Date()));
      this.ifReply = 0;
      PostComment(params).then(
        (res) => {
          console.log(res);
          this.ifReply = 0;
          this.$message({
            message: "成功回复，下次进入页面时显示最新数据",
            type: "success",
          });
        },
        (err) => {
          console.log(err);
        }
      );
    },
  },
  computed: {
    username() {
      return this.data == "" ? "" : this.data.username;
    },
    context() {
      return this.data == "" ? "" : this.data.context;
    },
    like() {
      return this.data == "" ? "" : this.data.likes-this.updateLike+this.updateLike;
    },
    comment() {
      return this.data.comment == "" || this.data.comment == null
        ? "回复"
        : json(this.data.comment).length;
    },
    real_time() {
      return this.data == "" ? "" : time(this.data.time);
    },
    likeclass() {
      let click = this.allReadyLike ? " click" : "";
      return `like${click}`;
    },
    commentclass() {
      let click = this.ifReply ? " click" : "";
      return `comment${click}`;
    },
    real_them() {
      let k = this.$store.state.skin;
      let m = k == true ? "light" : "dark";
      return this.them + " " + m;
    },
  },
};
</script>

<style lang="less" scoped>
@import "../main.less";
.light {
  background-color: white;
  transition: all 1s;
  color: @fs_light_contain;
  /deep/ .el-textarea__inner {
    transition: all 1s;
  }
}
.dark {
  background-color: rgb(33, 33, 33);
  transition: all 1s;
  color: @fs_dark_contain;
  /deep/ .el-textarea__inner {
    background-color: #1c1c1c !important;
    transition: all 1s;
    color: @fs_dark_smcontain !important;
  }
  /deep/ .el-input__count {
    background-color: #1c1c1c !important;
    transition: all 1s;
    color: @fs_dark_contain !important;
  }
}
.comment_first {
  padding: 5px 30px 0 10px;
  width: 100%;
  .comment_head {
    height: 30px;
    width: 100%;
    display: flex;
    align-items: center;
    .icon {
      width: 30px;
      height: 30px;
      border: 1px solid #ccc;
      border-radius: 50%;
    }
    .username {
      height: 100%;
      line-height: 30px;
      padding-left: 20px;
    }
  }
  .comment_body {
    width: 100%;
    padding-left: 30px;
    font-size: 14px;
    line-height: 20px;
  }
  .comment_foot {
    width: 100%;
    padding-left: 30px;
    height: 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .date {
      width: 50%;
      height: 100%;
      display: flex;
      justify-content: flex-start;
      align-items: center;
    }
    .sm_icons {
      width: 50%;
      height: 100%;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      .like {
        user-select: none;
        cursor: pointer;
        &:hover {
          transition: all 1s;
          color: @fs_btn_color;
        }
      }
      .comment {
        user-select: none;
        cursor: pointer;
        &:hover {
          transition: all 1s;
          color: @fs_btn_color;
        }
      }
      i {
        margin-right: 5px;
      }
      span {
        margin-right: 10px;
      }
    }
  }
  .reply {
    padding-left: 30px;
    user-select: none;
    .btn {
      cursor: pointer;
      margin: 5px 0;
      height: 35px;
      width: 80px;
      border-radius: 4px;
      border: 1px solid @bt_deep_light;
      background-color: rgba(30, 128, 255, 0.05);
      color: @fs_btn_color;
      font-size: 14px;
      .juzhong;
    }
  }
}

.click {
  color: @fs_btn_color;
}
</style>